import 'package:flutter/material.dart';

import 'SecondScreen.dart';

class VerifyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    //Scaffold是Material中主要的布局组件.
    return new Scaffold(
      body: ListView(
        children: <Widget>[
          Container(
            child: Image.asset(
              'image/yhb.png',
              height: 100.0,
            ),
            padding: const EdgeInsets.only(top: 50.0, bottom: 20.0),
          ),
          Stack(
            children: <Widget>[
              TextField(
                keyboardType: TextInputType.phone,
                maxLines: 1,
                autofocus: false,
                cursorColor: Colors.blue,
                maxLength: 11,
                // maxLengthEnforced: true,
                // focusNode: phoneFocusNode,
                decoration: InputDecoration(
                  hintText: "请输入手机号码",
                  labelText: "手机号",
                  prefixIcon: Icon(Icons.phone),
                  // 未获得焦点下划线设为灰色
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey),
                  ),
                  //获得焦点下划线设为蓝色
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.blue),
                  ),
                ),
              ),
              Positioned(
                child: FlatButton(
                  onPressed: () {},
                  child: Text(
                    '发送验证码',
                    style: TextStyle(
                      color: Color(0xFFFF502E),
                    ),
                  ),
                ),
                top: 15.0,
                right: 15.0,
              )
            ],
          ),
          TextField(
            keyboardType: TextInputType.text,
            obscureText: true,
            maxLines: 1,
            autofocus: false,
            cursorColor: Colors.blue,
            // focusNode: passwordFocusNode,
            maxLength: 6,
            decoration: InputDecoration(
              hintText: "请输入验证码",
              labelText: "验证码",
              prefixIcon: Icon(Icons.vpn_key),
              // 未获得焦点下划线设为灰色
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
              ),
              //获得焦点下划线设为蓝色
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.blue),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 16.0, left: 16.0, right: 16.0),
            child: FlatButton(
              color: Colors.red,
              highlightColor: Colors.blue[700],
              colorBrightness: Brightness.dark,
              splashColor: Colors.grey,
              child: Text("登录"),
              // shape: RoundedRectangleBorder(
              //     borderRadius: BorderRadius.circular(20.0)),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => new SecondScreen(),
                  ),
                );
              },
            ),
          ),
          Container(
            child: SwitchAndCheckBoxTestRoute(),
          ),
        ],
      ),
    );
  }
}

class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  @override
  _SwitchAndCheckBoxTestRouteState createState() =>
      new _SwitchAndCheckBoxTestRouteState();
}

class _SwitchAndCheckBoxTestRouteState
    extends State<SwitchAndCheckBoxTestRoute> {
  bool _checkboxSelected = true; //维护复选框状态
  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        Checkbox(
          value: _checkboxSelected,
          activeColor: Colors.red, //选中时的颜色
          onChanged: (value) {
            setState(() {
              _checkboxSelected = value!;
            });
          },
          shape: CircleBorder(),
        ),
        Container(
          child: new Text(
            '同意用户协议与隐私政策',
            style: new TextStyle(color: Color(0xff797979)),
          ),
        ),
      ],
    );
  }
}
